<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<%@ include file="/pages/inc/taglibs.jsp"%>
</head>
<body style="padding-top: 50px">

	<div class="container filter">
		<div id="expenseList">
			<table class="table table-striped table-bordered" cellspacing="0"
				width="100%">
				<thead>
					<tr>
						<th></th>
						<th>项目名称</th>
						<th>费用</th>
						<th>费用类别</th>
						<th>记账日期</th>
						<th>凭证编号</th>
						<th>摘要</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th></th>
						<th>项目名称</th>
						<th>费用</th>
						<th>费用类别</th>
						<th>记账日期</th>
						<th>凭证编号</th>
						<th>摘要</th>
					</tr>
				</tfoot>
				<tbody>
					<c-rt:forEach items="${expenseList}" var="expense">
						<tr>
							<td><input type="checkbox" name="expenseCheckbox"
								value="${expense.id}"></td>
							<td>${expense.projectName}</td>
							<td>${expense.expense}</td>
							<td>${expense.expenseTypeName}</td>
							<td>${expense.billingDate}</td>
							<td>${expense.documentNo}</td>
							<td>${expense.memo}</td>
						</tr>
					</c-rt:forEach>

				</tbody>

			</table>
		</div>
	</div>
	<!-- addproject modal -->
	<div id="addmodal" class="modal fade">
		<div class="modal-dialog modal-lg">
		<div class="container newproject">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">员工管理</h4>
				</div>
				<div class="modal-body">
					<form id="installationForm" class="form-horizontal">
						<input type="hidden" value="${expense.id}"> 
						<div class="tab-content">
							<!-- First tab -->
							<div class="tab-pane active" id="basic-tab">
								<div class="form-group">
									<div>
										<label for="projectname">员工姓名：</label>
									</div>
									<div class="col-xs-10">
										<input type="text" class="form-control" id="pName">
									</div>
								</div>
								<div class="form-group">
									<div>
										<label for="projectname">职位：</label>
									</div>
									<div class="col-xs-10">
										<input type="text" class="form-control" id="station">
									</div>
								</div>
								<div class="form-group">
									<div>
										<label for="startdate">部门:</label>
									</div>
									<div class="col-xs-10">
										<input type="date" id="department">
									</div>
								</div>
								<div class="form-group">
									<div>
										<label for="startdate">入职日期:</label>
									</div>
									<div class="col-xs-10">
										<input type="date" id="startdate">
									</div>
								</div>

								<div class="form-group">
									<div>
										<label for="enddate">离职日期：</label>
									</div>
									<div class="col-xs-10">
										<input type="date" id="enddate">

									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						onclick="saveEmployee()">提交</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>

		</div>
	</div>
	</div>
	<script type="text/javascript">
		function openAddEmployee() {
			$.ajax({
				url : "<c:url value='/company/expense/editView' />",
				data : {},
				type : 'POST',
				dataType : 'html',
				success : function(data) {
					$("#addmodal").html("");
					$("#addmodal").html(data);
				},
				error : function(data) {
					alert("error");
				}
			});
		}
		function openEditEmployee() {
			if($('input[name="expenseCheckbox"]:checked').length!=1){
				 alert("修改产品只能选择一条记录！");
				return false;
			}
			var id=$('input[name="expenseCheckbox"]:checked').val();	
			$.ajax({
				url : "<c:url value='/company/expense/editView' />",
				data : {id:id},
				type : 'POST',
				dataType : 'html',
				success : function(data) {
					$("#addmodal").html("");
					$("#addmodal").html(data);
				},
				error : function(data) {
					alert("error");
				}
			});
		}
		function saveEmployee() {
			var json = {};
			json.id = $("#expenseId").val();
			json.name = $("#expenseName").val();
			json.station = $("#station").val();
			json.department = $("#department").val();
			json.entryDate = $("#entryDate").val();
			json.departureDate = $("#departureDate").val();
			
			$.ajax({
				url : "<c:url value='/company/expense/save' />",
				type : 'POST',
				dataType : 'json',
				data : json, 
				success : function(data) {
					query();
				},
				error : function(data) {
					alert("error");
				}
			});
		}
		function deleteEmployee() {
			var ids = "";
			$('input[name="expenseCheckbox"]:checked').each(function() {
				ids += $(this).val() + ",";
				//alert($(this).val()); 
			});
			var json = {};
			json.ids = ids;
			$.ajax({
				url : "<c:url value='/company/expense/delete' />",
				type : 'POST',
				dataType : "json",
				data : json,
				success : function(data) {
					query();
				},
				error : function(data) {
					alert("error");
				}
			});
		}

		function query() {
			$.ajax({
				url : "<c:url value='/company/expense/list' />",
				data : {},
				type : 'POST',
				dataType : 'html',
				success : function(data) {
					$("#expenseList").html("");
					$("#expenseList").html(data);
				},
				error : function(data) {
					alert("error");
				}
			});
		}
	</script>
</body>
</html>